<template>
	<view class="content">
		<video :src="content.video" class="topSwiper" controls="true" v-if="content.video"></video>
		<swiper class="topSwiper" autoplay="true" :interval="3000" :duration="1000" v-else>
			<swiper-item class="topSwiperItem" v-for="(item,index) in content.course_image" :key="item.id">
				<image :src="item.uri" class="bannerItem"></image>
			</swiper-item>
		</swiper>
		<view class="outBox">
			<view class="titleBox">
				<text class="title">{{content.name}}</text>
				<image :src="baseUrl+'tuwenIcon.png'" class="tuwenIcon" v-if="content.type=='图文'" />
				<image :src="baseUrl+'videoIcon.png'" class="videoIcon" v-if="content.type=='视频'" />
				<image :src="baseUrl+'voice.png'" class="orderIcon" v-if="content.type=='音频'" />
				<image :src="baseUrl+'orderIcon.png'" class="liveIcon" v-if="content.type=='直播'&&content.state==1" />
				<image :src="baseUrl+'liveIcon.png'" class="liveIcon" v-if="content.type=='直播'&&content.state==2" />
				<image :src="baseUrl+'end.png'" class="endliveIcon" v-if="content.type=='直播'&&content.state==3" />
			</view>
			<view class="priceBox">
				<block v-if="content.fee_type==1">
					<text class="sellPrice">￥{{content.sell_price}}</text>
					<text class="oldPrice">原价￥{{content.line_price}}</text>
				</block>
				<text class="sellPrice" v-else>免费</text>
			</view>
			<text class="describe">{{content.synopsis}}</text>
			<view class="numBox" v-if="content.type!='直播'">
				<image :src="baseUrl+'arrow.png'" class="arrowIcon"></image>
				<text class="label">{{content.study_num}}人在学习</text>
				<text class="line1"></text>
				<image :src="baseUrl+'time.png'" class="timeIcon"></image>
				<text class="total">共{{content.course_num}}讲</text>
			</view>
			<view class="liveBox" v-else>
				<image :src="baseUrl+'person.png'" class="livePersonIcon"></image>
				<text class="liveTeacherName">{{$teacher(content.teacher_arr)}}</text>
				<view class="line1"></view>
				<image :src="baseUrl+'time.png'" class="liveTimeIcon"></image>
				<text class="liveTime">直播时间：{{content.live_time}}</text>
			</view>
			<view class="couponBox">
				<text class="label">优惠券</text>
				<view class="couponList">
					<view class="couponItem" v-for="(item,index) in coupon.slice(0,3)" :key="index">
						{{item.name}}
					</view>
					<view class="dot" v-if="coupon.length>0">
						...
					</view>
				</view>
				<text class="lingquan" @click="isCoupon=!isCoupon">领券 ></text>
			</view>
			<!-- 课程目录 -->
			<view class="catalogueBox">
				<text class="catalogueBoxTitle">课程目录</text>
				<view class="catalogueBoxTitleLine">
				</view>
				<view class="catalogueItem" v-for="(item,index) in catalog.catalogue_list" :key="index"
					@click="study(item.id,0,index)">
					<!-- 免费 -->
					<view v-if="item.fee_type==0" class="catalogueItemBox">
						<text class="catalogueTitle">{{index+1}}.{{item.name}}</text>
						<image :src="baseUrl+'free.png'" class="free" />
						<text class="studyStatus" v-if="item.is_study==true">已学习</text>
						<text class="studyStatus" v-else>未学习</text>
					</view>
					<!-- 收费 -->
					<view class="catalogueItemBox" v-else>
						<text class="catalogueTitle">{{index+1}}.{{item.name}}</text>
						<text class="studyStatus" v-if="item.is_study==true">已学习</text>
						<text class="studyStatus" v-else>未学习</text>
						<image :src="baseUrl+'lock.png'" class="lock" v-if="catalog.course_status!=3" />
						<view class="study" v-else>
							立即学习
						</view>
					</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="detailBox">
				<image :src="baseUrl+'details.png'" class="detailsImg"></image>
				<!-- <v-tabs v-model="menuIndex" :tabs="content.fee_type	==1?['课程介绍','课程目录','学员评价']:['课程介绍','课程目录']" -->
				<v-tabs v-model="menuIndex" :tabs="content.fee_type	==1?['课程介绍','学员评价']:['课程介绍']" bgColor="transparent"
					activeColor="#f08229" lineColor="#f08229" color="#00000" lineHeight='5rpx' @change="changeMenu()"
					class="vtabs" lineScale="0.75"></v-tabs>
			</view>
			<!-- 课程介绍 -->
			<view class="introduceBox" v-if="menuIndex==0">
				<!-- <mp-html :content="content.content" class="info" /> -->
				<u-parse :html="content.content" :show-with-animation="true"></u-parse>
			</view>
			<!-- 学员评价 -->
			<view class="evaluateBox" v-else-if="menuIndex==1">
				<view class="evaluateItem" v-for="(item,index) in content.comment" :key="index">
					<view class="topBox">
						<image :src="item.avatar" class="avatar" />
						</image>
						<text class="name">{{item.nickname}}</text>
					</view>
					<view class="centerBox">
						<uni-rate :readonly="true" :value="item.course_score" :size="20" activeColor="#ee822a" />
						<text class="time">{{item.create_time}}</text>
					</view>
					<text class="info">{{item.comment}}</text>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="menuBox">
			<view class="homeBox" @click="$switchTab('/pages/course/course')">
				<image :src="baseUrl+'home.png'" class="homeImg" />
				<text class="homeLabel">首页</text>
			</view>
			<view class="collectBox" v-if="content.is_collect==true">
				<image :src="baseUrl+'collected.png'" class="collectImg" @click="collect(0)" />
				<text class="collectLabel">取消</text>
			</view>
			<view class="collectBox" v-else>
				<image :src="baseUrl+'collect.png'" class="collectImg" @click="collect(1)" />
				<text class="collectLabel">收藏</text>
			</view>

			<view class="buyBox" v-if="content.fee_type==0" @click="study(1,1)">
				<!-- 未开始 -->
				<text v-if="content.state==1">
					立即预约
				</text>
				<text v-else>
					立即学习
				</text>
			</view>
			<block v-else>
				<!-- 已结束 -->
				<view class="buyBox" v-if="content.type=='直播'&&content.state==1" @click="buy(content.id,1)">
					立即购买
				</view>
				<view class="endBox" v-else-if="content.type=='直播'&&content.state==3">
					已结束
				</view>
				<view class="buyBox" v-else-if="content.course_status==3" @click="study(1,1)">
					立即学习
				</view>
				<view class="buyBox" v-else @click="buy(content.id,2)">
					购买课程
				</view>
			</block>
		</view>
		<view class="couponOuter" v-if="isCoupon">
			<view class="couponInner">
				<text class="couponTitle">--优惠券--</text>
				<view class="couponList">
					<view class="couponItem" v-for="(item,index) in coupon" :key="index">
						<image :src="baseUrl+'couponbg.png'" class="couponbg" />
						<text class="priceIcon">￥</text>
						<text class="couponPrice">{{item.money}}</text>
						<text class="couponCondition">{{item.content}}</text>
						<text class="couponName">{{item.name}}</text>
						<text class="couponTime">有效期:{{item.use_time_desc}}</text>
						<!-- <view class="get" @click="getCoupon(item.id)">领券</view> -->
						<view class="get" v-if="item.is_get==false" @click="getCoupon(item.id)">领券</view>
						<view class="use" v-else>已领取</view>
					</view>
				</view>
				<view class="closeCoupon" @click="isCoupon=!isCoupon">
					关闭
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/course/`,
				menuIndex: 0,
				content: '',
				isCoupon: false,
				coupon: [],
				id: '',
				catalog: '',
				sharImage: ''
			}
		},
		onShow() {

			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.id = currentPage.options.id;
			this.queryInfo();
			this.queryCoupon();
			this.queryCatalog();
		},
		onLoad() {
			// this.$request.get(`shopapi/home/slideshow_list?type=10`).then(res => {
			// 	console.log(res.data.data.lists[0].img_url)
			// 	this.sharImage=res.data.data.lists[0].img_url;
			// })
		},
		onShareAppMessage() {
			return {
				title: '给你推荐' + this.content.name,
				path: `/course/info/info?id=${this.content.id}&invite_code=${this.userInfo.code}`,
				imageUrl: this.content.share_img
			}
		},
		methods: {
			order() { //预约课程
				this.$request.post(`course/course/live_sub`, {
					course_id: this.id
				}).then(res => {
					this.$toast({
						title: res.data.msg
					})
				})
			},
			study(id, type, index) { //学习 
				console.log(this.content.course_status);
				if (this.content.course_status != 3 && this.content.fee_type == 1) {
					this.$toast({
						title: '付费课程请先购买'
					})
					return;
				}
				this.$request.post(`course/course/study`, {
					id: id,
					order_id: '',
					course_id: this.id
				}).then(res => {
					console.log("学习");
				})
				console.log(this.content.type);
				if (this.content.type == '直播') { //跳直播h5
					console.log(this.content.live_url)
					// this.$toMini(this.content.live_url)
					// this.$navto.navto('/bundle/pages/broadcast/broadcast')"
					uni.navigateTo({
						url: `/bundle/pages/broadcast/broadcast?type=1&url=${encodeURIComponent(this.content.live_url)}&share=${encodeURIComponent(this.content.share_img)}`
					})
					return;
				}
				console.log(id);
				let contentId;
				//获取未学习目录id 如果都学习了就从第一个开始
				const num = this.findFirstFalseStudyIndex(this.content.catalogue_list);
				console.log('未学习' + num);
				if (type == 0) { //点的目录里面的立即学习
					contentId = id;
				} else {
					if (num == 0) {
						contentId = this.content.catalogue_list[0].id;
					} else {
						contentId = this.content.catalogue_list[num].id;
					}
				}
				uni.navigateTo({
					url: `/course/study/study?type=${encodeURIComponent(this.content.type)}&course_id=${this.content.id}&id=${contentId}&index=${index}`
				})
			},
			buy(id, num) { //购买课程
				if (!this.isLogin) {
					this.$Router.push('/pages/login/login');
					console.log("走到这里了");
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}
				uni.navigateTo({
					url: `/course/course_order/course_order?id=${id}`
				});
				// let content = "是否确认购买";
				// if (num == 1) {
				// 	console.log(num);
				// 	content = "是否确认预约";
				// }
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: content,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 			uni.navigateTo({
				// 				url: `/course/course_order/course_order?id=${id}`
				// 			});
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			},
			collect(num) { //收藏课程
				this.$request.post(`course/collect/collect`, {
					id: this.id,
					collect: num,
				}).then(res => {
					this.queryInfo();
					this.$toast({
						title: res.data.msg
					})
				})
			},
			getCoupon(id) { //领取优惠券
				this.$request.post(`course/coupon/receive`, {
					id: id,
					order_id: '',
					course_id: this.id
				}).then(res => {
					this.$toast({
						title: res.data.msg
					})
					this.queryCoupon();
				})
			},
			queryCoupon() {
				this.$request.get(`course/coupon/lists`).then(res => {
					console.log(res.data);
					this.coupon = res.data.data.lists;
				})
			},
			queryInfo() {
				//查询详情
				this.$request.get(`course/course/detail?id=${this.id}`).then(res => {
					console.log(res.data);
					this.content = res.data.data;
				})
			},
			queryCatalog() {
				//查询目录
				this.$request.get(`course/course/catalogueLists?id=${this.id}`).then(res => {
					console.log(res.data);
					this.catalog = res.data.data;
				})
			},
			changeMenu(index) {
				// if (index == 1) { //查询目录
				// 	this.queryCatalog();
				// }
			},
			findFirstFalseStudyIndex(arr) {
				// 使用 findIndex 方法查找第一个 is_study 为 false 的元素的索引
				const index = arr.findIndex(item => item.is_study === false);
				// 如果找到了（索引不为-1），返回索引+1（因为要求从1开始计数）
				// 如果没找到（所有的 is_study 都为 true），返回 0
				return index !== -1 ? index : 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.introduceBox {
		font-size: 0;
	}

	.introduceBox image {
		width: 100%;
		display: block;
		vertical-align: middle;
	}

	.outBox {
		position: relative;
		width: 100%;
		border-radius: 30rpx 30rpx 0 0;
		// margin-top: -30rpx;
		background-color: rebeccapurple;
		background-color: #fff;
		padding-top: 60rpx;
	}

	.study {
		width: 130rpx;
		height: 40rpx;
		line-height: 40rpx;
		right: 40rpx;
		border-radius: 40rpx;
		background-color: #f08229;
		color: #fff;
		font-size: 19rpx;
		font-weight: 500;
		text-align: center;
		// position: absolute;
	}

	.couponOuter {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99999999;
	}

	.couponInner {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 980rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.closeCoupon {
			width: 432rpx;
			height: 82rpx;
			margin-top: 20rpx;
			background-color: #f08229;
			border-radius: 41rpx;
			margin-left: 160rpx;
			font-size: 27rpx;
			font-family: 'am';
			color: #fff;
			text-align: center;
			line-height: 82rpx;
		}

		.couponList {
			width: 670rpx;
			height: 700rpx;
			margin-top: 55rpx;
			margin-left: 40rpx;
			overflow-y: scroll;

			.couponItem {
				position: relative;
				width: 100%;
				height: 194rpx;
				margin-bottom: 25rpx;

				.use,
				.get {
					position: absolute;
					top: 40rpx;
					right: 25rpx;
					width: 116rpx;
					height: 50rpx;
					background-color: #f08229;
					border-radius: 25rpx;
					font-size: 21rpx;
					font-family: 'ar';
					color: #fff;
					text-align: center;
					line-height: 50rpx;
					letter-spacing: 5rpx;
				}

				.couponTime {
					position: absolute;
					top: 120rpx;
					left: 220rpx;
					font-size: 19rpx;
					font-family: 'ar';
					color: #8e8e8e;
				}

				.couponName {
					position: absolute;
					top: 50rpx;
					left: 220rpx;
					font-size: 27rpx;
					font-family: 'am';
				}

				.couponCondition {
					position: absolute;
					width: 194rpx;
					top: 125rpx;
					left: 0;
					font-size: 19rpx;
					font-family: 'ar';
					color: #fff;
					text-align: center;
				}

				.couponPrice {
					position: absolute;
					top: 50rpx;
					left: 35rpx;
					font-size: 40rpx;
					font-family: 'ab';
					color: #fff;
					width: 24%;
				}

				.priceIcon {
					position: absolute;
					top: 65rpx;
					left: 7rpx;
					font-size: 25rpx;
					font-family: 'ab';
					color: #fff;
				}

				.couponbg {
					width: 100%;
					height: 194rpx;
				}
			}
		}

		.couponTitle {
			width: 100%;
			color: #141414;
			font-size: 28rpx;
			font-family: 'ar';
			text-align: center;
			display: block;
			margin-top: 45rpx;
		}
	}

	.liveBox {
		height: 24rpx;
		margin-left: 40rpx;
		margin-top: 55rpx;
		display: flex;
		align-items: center;

		.line1 {
			width: 1rpx;
			height: 20rpx;
			margin-left: 30rpx;
			background-color: #dcdcdc;
			margin-top: 5rpx;
		}

		.livePersonIcon {
			width: 21rpx;
			height: 20rpx;
		}

		.liveTeacherName {
			font-size: 19rpx;
			color: #8e8e8e;
			margin-left: 15rpx;
		}

		.liveTimeIcon {
			width: 21rpx;
			height: 21rpx;
			margin-left: 25rpx;
		}

		.liveTime {
			font-size: 19rpx;
			color: #8e8e8e;
			margin-left: 15rpx;
		}
	}

	.evaluateBox {
		width: 670rpx;
		margin-top: 60rpx;
		margin-bottom: 150rpx;
		margin-left: 40rpx;

		.evaluateItem {
			width: 100%;
			margin-bottom: 100rpx;

			.info {
				display: block;
				width: 100%;
				font-size: 28rpx;
				color: #414141;
				margin-top: 35rpx;
				font-weight: 500;
				word-break: break-word;
			}

			.centerBox {
				width: 100%;
				margin-top: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					color: #8e8e8e;
					font-size: 22rpx;
				}
			}

			.topBox {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;

				.avatar {
					width: 70rpx;
					height: 70rpx;
				}

				.name {
					font-size: 28rpx;
					margin-left: 40rpx;
					font-weight: 700;
				}
			}

		}
	}

	.catalogueBox {
		width: 670rpx;
		// height: 57rpx;
		margin-top: 60rpx;
		margin-bottom: 150rpx;
		margin-left: 40rpx;

		.catalogueBoxTitleLine {
			width: 100%;
			height: 2rpx;
			background-color: #dcdcdc;
			margin-bottom: 50rpx;
			margin-top: 50rpx;
			display: inline-block;
		}

		.catalogueBoxTitle {
			width: 100%;
			font-size: 34rpx;
			font-weight: 700;
			display: inline-block;
		}

		.catalogueItem {
			width: 100%;
			margin-bottom: 54rpx;

			.catalogueItemBox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.free {
					width: 80rpx;
					height: 36rpx;
				}

				.lock {
					width: 57rpx;
					height: 57rpx;
				}

				.catalogueTitle {
					max-width: 60%;
					font-size: 30rpx;
					color: #000000;
					font-weight: 500;
				}
			}
		}
	}

	.menuBox {
		position: fixed;
		width: 750rpx;
		height: 140rpx;
		bottom: 0rpx;
		background-color: #fff;
		display: flex;
		z-index: 999999;
		padding-top: 20rpx;

		.endBox {
			width: 444rpx;
			height: 80rpx;
			line-height: 80rpx;
			right: 40rpx;
			border-radius: 40rpx;
			background-color: grey;
			color: #fff;
			font-size: 29rpx;
			font-weight: 500;
			text-align: center;
			position: absolute;
		}

		.buyBox {
			width: 444rpx;
			height: 80rpx;
			line-height: 80rpx;
			right: 40rpx;
			border-radius: 40rpx;
			background-color: #f08229;
			color: #fff;
			font-size: 29rpx;
			font-weight: 500;
			text-align: center;
			position: absolute;
		}

		.collectBox {
			// width: 40rpx;
			height: 100%;
			margin-left: 45rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.collectImg {
				width: 31rpx;
				height: 27rpx;
				margin-top: 13rpx;
			}

			.collectLabel {
				font-size: 19rpx;
				margin-top: 15rpx;
			}
		}

		.homeBox {
			// width: 40rpx;
			height: 100%;
			margin-left: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.homeImg {
				width: 33rpx;
				height: 31rpx;
				margin-top: 10rpx;
			}

			.homeLabel {
				font-size: 19rpx;
				margin-top: 13rpx;
			}
		}
	}

	.introduceBox {
		width: 100%;
		margin-top: 60rpx;
		margin-bottom: 150rpx;
		// margin-left: 40rpx;
	}

	.detailBox {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 105rpx;

		/deep/ .v-tabs {
			margin-left: -24rpx !important;
		}

		.detailsImg {
			width: 165rpx;
			height: 94rpx;
			margin-bottom: 78rpx;
		}
	}

	.couponBox {
		position: relative;
		width: 710rpx;
		height: 37rpx;
		margin-top: 48rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.lingquan {
			position: absolute;
			color: #e7503f;
			font-size: 25rpx;
			right: 40rpx;
			top: 0;
			line-height: 37rpx;
		}

		.couponList {
			height: 37rpx;
			display: flex;

			.dot {
				color: #e7503f;
				font-size: 19rpx;
			}

			.couponItem {
				padding: 5rpx 10rpx 5rpx 10rpx;
				border: 1rpx solid #e7503f;
				color: #e7503f;
				font-size: 19rpx;
				margin-right: 10rpx;
			}
		}

		.label {
			font-size: 25rpx;
			margin-right: 20rpx;
		}
	}

	.numBox {
		height: 24rpx;
		margin-left: 40rpx;
		margin-top: 55rpx;
		display: flex;
		align-items: flex-start;

		.arrowIcon {
			width: 22rpx;
			height: 24rpx;
			margin-top: 5rpx;
		}

		.label {
			font-size: 19rpx;
			color: #8e8e8e;
			margin-left: 15rpx;
		}

		.line1 {
			width: 1rpx;
			height: 20rpx;
			margin-left: 30rpx;
			background-color: #dcdcdc;
			margin-top: 5rpx;
		}

		.timeIcon {
			width: 21rpx;
			height: 21rpx;
			margin-left: 30rpx;
			margin-top: 5rpx;
		}

		.total {
			font-size: 19rpx;
			color: #8e8e8e;
			margin-left: 15rpx;
		}
	}

	.describe {
		display: block;
		width: 710rpx;
		font-size: 25rpx;
		line-height: 35rpx;
		letter-spacing: 2rpx;
		color: #000000;
		margin-left: 30rpx;
		text-align: justify;
		margin-top: 50rpx;
	}

	.priceBox {
		width: 710rpx;
		margin-left: 40rpx;
		margin-top: 53rpx;

		.sellPrice {
			font-size: 47rpx;
			color: #f08229;
		}

		.oldPrice {
			font-size: 23rpx;
			color: #8e8e8e;
			margin-left: 30rpx;
			text-decoration: line-through;
		}
	}

	.titleBox {
		width: 710rpx;
		// height: 54rpx;
		margin-left: 40rpx;
		margin-top: 63rpx;
		display: flex;
		align-items: center;
		overflow-x: scroll;

		.endliveIcon {
			width: 92rpx;
			height: 48rpx;
			margin-left: 25rpx;
		}

		.orderIcon,
		.liveIcon {
			width: 92rpx;
			height: 40rpx;
			margin-left: 25rpx;
		}

		.tuwenIcon,
		.videoIcon {
			width: 72rpx;
			height: 38rpx;
			margin-left: 25rpx;
		}

		.title {
			font-size: 52rpx;
			color: #141414;
			width: 570rpx;
			font-family: 'am';
		}
	}

	.topSwiper {
		width: 100%;
		height: 446rpx;

		.topSwiperItem,
		.bannerItem {
			width: 100%;
			height: 100%;
		}
	}

	.headImg {
		width: 100%;
		height: 446rpx;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #fff;
	}

	/deep/ page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff !important;
		padding-bottom: 0 !important;
	}
</style>